<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/orders.css') }}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/products">产品</a></li>
            <li><a href="/cart">购物车</a></li>
            <li><a href="/orders">我的订单</a></li>
            <li><a href="/about">关于我们</a></li>
            <li><a href="/contact">联系我们</a></li>
            {% if 'username' in session %}
            <li><a href="/profile">个人资料</a></li>
            <li><a href="/logout">登出</a></li>
            {% else %}
            <li><a href="/login">登录</a></li>
            <li><a href="/register">注册</a></li>
            {% endif %}
        </ul>
    </nav>

    <!-- 主内容 -->
    <div class="main-content" style="text-align: center;">
        <h2>我的订单</h2>
        {% if orders %}
        <table style="margin: 0 auto;">
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>产品名称</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>订单日期</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for order in orders %}
                <tr>
                    <td>{{ order.order_id }}</td>
                    <td>{{ order.product_name }}</td>
                    <td>{{ order.quantity }}</td>
                    <td>￥{{ order.price }}</td>
                    <td>{{ order.order_date }}</td>
                    <td>{{ order.status }}</td>
                    <td>
                        {% if order.status != '已签收' %}
                        <button class="sign-receipt-button" data-order-id="{{ order.order_id }}">签收</button>
                        {% else %}
                        已签收
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p>您还没有订单。</p>
        {% endif %}
    </div>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2024 网上商店。保留所有权利。</p>
        <ul>
            <li><a href="/terms">服务条款</a></li>
            <li><a href="/privacy">隐私政策</a></li>
        </ul>
    </footer>

    <script>
        $(document).ready(function() {
            $('.sign-receipt-button').click(function() {
                var orderId = $(this).data('order-id');
                $.post("{{ url_for('sign_receipt') }}", { order_id: orderId }, function(data) {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('签收失败：' + data.message);
                    }
                }, 'json');
            });
        });
    </script>
</body>
</html>
